<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体和文本的样式</title>
    <style>
        li {
            font-size: 30px;
            font-weight: 900;
            font-style: initial;
            font-family: 不存在的字体, DFKai-SB, sans-serif;
        }

        /* 字体样式连写，发现并没有生效，建议实际开发中还是分开写比较好 */
        strong {
            font: initial 900 30px 楷体;
        }

        span {
            color: lightcoral;
        }

        p {
            /* 单位em只目标元素字体大小的尺寸 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h1>字体和文本的样式</h1>
    <strong>目标：能够使用<span>字体和文本相关样式</span>修改元素外观样式</strong>

    <p>1. 字体样式：</p>
    <ul>
        <li>字体大小：font-size</li>
        <li>字体粗细：font-weight</li>
        <li>字体样式：font-style</li>
        <li>字体类型：font-family</li>
        <li>字体类型：font属性连写</li>
    </ul>
    <span>补充：常见的字体系列</span>
    <ul>
        <li>无衬线字体（sans-serif）：
            <span>文字笔画粗细一致，首尾无装饰。网页中大都采用无衬线字体。常见的无衬线字体有：黑体、Arial。</span>
        </li>
        <li>衬线字体（serif）：
            <span>文字笔画粗细不均，首尾有笔锋装饰。大都出现在报刊书籍之中。常见的衬线字体有：宋体、Times New Roman。</span>
        </li>
        <li>等宽字体（monospace）：
            <span>每个字母或文字的宽度相同。一般用于程序代码编写，有利于代码阅读。常见的等宽字体有：Consolas、Droid Sans Mono。</span>
        </li>
    </ul>
    <span>补充：当网页中不设置字体时，将以系统字体作为呈现字体。其中：Windows系统默认字体是“微软雅黑”，苹果系统默认字体是“苹方”。</span>
    <p>【特别强调】：一般设置字体时都会指定多个字体，它们彼此之间用逗号隔开。以此来防止字体缺失的情况。当位于前面的字体缺失时，浏览器将会尝试使用下一个字体作为显示字体。基于这种特性，一般而言，若要设置字体则会在最后一项不指定具体字体，而是指定字体系列，以此，即便前面设定的所有字体都缺失时，浏览器也能找到一款系统指定系列的字体作为渲染字体。</p>
    <p>2. 文本样式</p>
    <ul>
        <li>文本缩进：text-indent：
            <p>说明：一般而言，设置文本缩进的尺寸单位不建议使用px。推荐使用em，1em等于目标元素1个字的font-size的大小，以此来防止目标字体大小被更改但是忘记更改文本缩进的尺寸导致缩进字数不达标的问题发生。谷歌浏览器默认字体大小是16px。</p>
        </li>
        <li>文本水平对齐方式：text-align：
            <p>说明：有三种取值。left：左对齐；center：居中对齐；right：右对齐。</p>
            <p style="text-align: left;">被靠左显示的文本</p>
            <p style="text-align: center;">被居中显示的文本</p>
            <p style="text-align: right;">被靠右显示的文本</p>
            <p>【特别说明】：text-align: center除了可以设置文本水平居中外，还可以用来设置span标签、a标签、input标签、img标签的水平居中布局哦。只需要将这一设置设定到直接包裹这些标签的父元素上即可。</p>
            <p>说明：一般而言，对于上述标签外的其他块级元素设定水平居中，可以通过设定margin: 0 auto;来实现，且需要设定在被居中的元素上，而不是包裹这个元素的父标签上。同时，必须给被指定元素设定宽度，否则这一设置将使得被设定元素的宽度为100%。</p>
        </li>
        <div style="background-color: skyblue; width: 200px; height: 200px; margin: auto;">
            <div style="background-color: red; width: 100px; height: 100px; margin: 0 auto;"></div>
        </div>
        <li>文本修饰：text-decoration（具有四种取值）：
            <ul>
                <li>underline:下划线（常用）</li>
                <li>line-through:删除线（不常用）</li>
                <li>overline:上划线（几乎不用）</li>
                <li>none:无装饰（常用、默认使用）</li>
            </ul>
            <p>说明：一般而言，对于a标签的下划线去除就是通过设置text-decoration=none实现的。</p>
            
        </li>
    </ul>

    
    <p>3. line-height行高</p>
    <p style="line-height: 3em;">行高：用于控制行间距。通过属性line-height进行调整，取值可以是数字+px，也可以是倍数，当取倍数时是以目标元素的font-size作为“单位一”。通过设置单行文本的行高为父元素的高度，可以将单行文本在父元素的空间内垂直居中。在网页的精准布局中，通过设置行高可以取消上下间距，通过行高减去文本字体大小的高度剩余部分等分成两份，一份是上间距，一份是下间距（知道了这种计算方式之后，另一种让元素垂直居中的方式就是，设置上下Margin为父空间高度减去元素自身高度得到的差除以2）。（通过设置行高，可以实现诸如一个文本和一个输入框同行时希望文本和文本框等高的效果）。</p>

    <div 
        style="
            background-color: skyblue;
            width: 400px;
            height: 400px;
            font-size: 20px;
            line-height: 400px;
            text-align: center;
        "
    >
        利用行高实现"单行文本"垂直居中效果
        
    </div>
    <strong>通过鼠标选中可以看见行高效果。</strong>
</body>
</html>